<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
    <div class="nav">五子棋对战</div>
    <div class="container">
        <div>
            <!--展示用户信息-->
            <div id="screen"></div>
            <!--匹配按钮-->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            type:'get',
            url:'/userInfo',
            success:function(body){
                let screenDiv=document.querySelector('#screen');
                screenDiv.innerHTML='玩家：'+body.username+"分数："+body.score+"<br> 比赛场次:"+body.totalCount+"获胜次数："+body.winCount
            },
            error:function(){
                alert("获取用户信息失败！");
            }
        });

        //此处进行初始化websocket，并且实现前端的匹配逻辑
        //此处的路径必须写作、findMatch
        let websocketUrl='ws://'+location.host+'/findMatch';
        let websocket=new WebSocket(websocketUrl);
        websocket.onopen=function(){
            console.log("onopen");
        }
        websocket.onclose=function(){
            console.log("onclose");
        }
        websocket.onerror=function(){
            console.log("onerror");
        }

        //给匹配按钮添加一个点击事件
        let matchButton=document.querySelector('#match-button');
        matchButton.onclick=function(){
            //在触发websocket请求之前，先确认websocket连接是否好
            if(websocket.readyState==websocket.OPEN){
                //如果当前readyState处于OPEN状态，说明连接好着
                //发送的数据：开始匹配/停止匹配
                if (matchButton.innerHTML == '开始匹配') {
                    console.log('开始匹配!');
                    websocket.send(JSON.stringify({
                        message: 'startMatch',
                    }));
                } else if (matchButton.innerHTML == '匹配中...(点击停止)') {
                    console.log('停止匹配!');
                    websocket.send(JSON.stringify({
                        message: 'stopMatch',
                    }));
                }
            }else{
                //连接是异常状态
                alert("当前您的连接已经断开！请重新登录！");
                location.replace('/login.html');
            }
        }


        //处理服务器返回的响应
        websocket.onmessage=function(e){
            //针对服务器返回的响应数据，这个响应就是针对“开始匹配”/“结束匹配”来对应的
            //解析得到的响应对象，返回的数据是一个JSON字符串，解析成js对象
            let resp=JSON.parse(e.data);
            if(!resp.ok){
                console.log("游戏大厅中接收到了失败响应！"+resp.reason);
                return;
            }
            if(resp.message=='startMatch'){
                //开始匹配请求发送成功
                console.log("进入匹配队列成功！");
                matchButton.innerHTML='匹配中...(点击停止)';
            }else if(resp.message=='stopMatch'){
                //结束匹配请求发送成功
                console.log("离开匹配队列成功！");
                matchButton.innerHTML='开始匹配';
            }else if(resp.message=='matchSuccess'){
                // 匹配到了对手
                console.log("匹配成功！进入游戏界面！");
                location.replace("/game_room.html");
            }else if(resp.message=='repeatConnection'){
                alert("当前检测到了多开，请使用其他账号登录！");
                location.replace('/login.html');
            }else{
                console.log("接受了非法的响应！message="+resp.message);
            }
        }

        //监听页面关闭事件，在页面关闭之前，手动调用这里的websocket的close方法
        window.onbeforeunload=function(){
            websocket.close();
        }
    </script>
</body>
</html>